<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<style>
        body,
div,
ul,
ol,
dt,
dd,
dl,
li,
h1,
h2,
h3,
h4,
h5,
h6,
form,
input,
select,
textarea,
p,
img,
a,
span,
strong,
* {
	padding: 0;
	margin: 0;
}




/*去掉默认距离*/


body {
	font-size: 12px;
	font-family: "微软雅黑";
	color: #000000;
	background-color: #FFFFFF;
}


ul,
ol,
li {
	list-style: none;
}




/*去点*/


img,
input,
select,
textarea {
	vertical-align: middle
}




a {
	color: #333333;
	text-decoration: none;
}




/*去下划线*/


a:hover {
	color: red;
}


.clear {
	clear: both;
	height: 0;
	width: 0;
	overflow: hidden;
}




/*清除浮动*/
#tl{
	height: 70px;
	background: #242424;
	border-bottom: 1px solid #000000;
}


#nav {
	width: 1100px;
	height: 70px;
	line-height: 70px;
	margin: auto;
}


#nav img {
	float: left;
	margin-top: 15px;
}


#nav ul:nth-of-type(1) {
	float: left;
}


#nav ul:nth-of-type(2) {
	float: right;
}


#nav ul:nth-of-type(1) li {
	padding-left: 20px;
	padding-right: 20px;
	color: #FFFFFF;
	float: left;
}


#nav ul:nth-of-type(1) li:nth-of-type(1) {
	background: #000000;
}


#nav ul:nth-of-type(2) li {
	padding-left: 20px;
	padding-right: 20px;
	color: #FFFFFF;
	float: left;
}


#nav ul:nth-of-type(2) li:nth-of-type(1) input {
	width: 158px;
	height: 32px;
	border: none;
	border-radius: 50px;
	padding-left: 20px;
}


#nav ul:nth-of-type(2) li:nth-of-type(2) input {
	width: 88px;
	height: 30px;
	border: 1px solid #CCCCCC;
	border-radius: 50px;
	background: #242424;
	color: #FFFFFF;
}


#nav ul:nth-of-type(2) li:nth-of-type(3) {
	color: #787878;
}


.box2 {
	height: 35px;
	background: #c20c0c;
	color: #FFFFFF;
}


.box2_1 {
	width: 560px;
	margin: auto;
	height: 35px;
}


.box2_1 ul li {
	padding: 5px;
	line-height: 11px;
	float: left;
	margin-top: 5px;margin-left: 20px;margin-right: 20px;
	border-radius: 50px;
}
.box2_1 ul li:nth-of-type(1){
	background: #9b0909;
}


#box3{ 
 height:350px;
 position: relative;
 overflow: hidden;
 }
 .u1{
	 
	 position: absolute;
	 left:360px;
	 
 }
 
        .u1 li:not(:first-child){ display: none;}
        #ol{
            position: absolute; 
            bottom:-120px; 
            left:50%;
             margin-left:-102px
          
        }
#ol{
	position: absolute;
	bottom: 0;
}
        #ol li{ width: 8px;
		 height:8px;
		  border-radius: 100%;
      margin:0 6px;
        border:1px solid #ccc;
        float: left;
        background:#fff
        }
        #ol .ol_li {
            background:red
        }
.l,.r{
			 	width: 40px;
			 	height: 60px;
			 	position: absolute;
			 	top:150px;
			 	display: none;
			 	cursor: pointer;
			 	border: 1px solid #666;
			 	background: #ccc;
			 	opacity: .6;
			 	text-align: center;
			 	line-height: 60px;
			 	font-size: 50px;
			 	font-weight: bolder;
			 	color: #fff;
			 	
			 }
			 
			 
			 .l{
			 	left:15%;
			 }
			 
			 .r{
			 	right:5%;
			 }
#im{
	position: absolute;
	right:8%;
}
#box4{
	width: 1000px;
	height:1200px;
	margin: auto;
	position: relative;
	top:20px;
}
#lef{
	width: 700px;
	height:1200px;
	float: left;
}
#rem{
	width: 700px;
	height: 480px;
}
#u1{
	height: 30px;
	line-height:20px;
	border-bottom: 2px  solid red;
	
}
 #u1 li{
	float: left;
	margin: 5px 5px;
	font-weight: bolder;

}
#li{
	padding-left:350px;
}
#rem dl{
	width:140px;
	height: 182px;
	float: left;
	margin-left: 20px;
	margin-top:20px;
	
}
#rem dl dt{
	margin: 20px 20px;
}
#rem dl dd{
	text-align: center;
}
#rem dl dt img{
	width: 140px;
	height: 140px;
	
}
#h2{
	width: 700px;
	height: 35px;
	line-height:35px;
	border-bottom: 2px solid red;
}
#s1{
	float: left;
}
#s2{
	float: right;
	font-size: 12px;
}
#xd{
	width: 700px;
	height: 180px;
	border: 1px solid #ccc;
	margin-top: 10px;
	background: #f5f5f5;
	overflow: hidden;
}
#xd dl{
	width: 101px;
	height: 140px;
	text-align:center;
	float: left;
	margin: 35px 35px;
}
#xd dl dt img{
	width: 100px;
	height: 100px;
}
#bd{
	width: 700px;
	height:600px;
}
#h3{
	width: 700px;
	height: 35px;
	line-height:35px;
	border-bottom: 2px solid red;
}
#s3{
	float: left;
}
#s4{
	float: right;
	font-size: 12px;
}
#bd1{
	width:700px;
	height: 466px;
	border: 1px solid #ccc;
	margin-top: 10px;
	background: #f4f4f4;
}
#ri{
	width: 254px;
	height:1225px;
	float: right;
	border: 1px solid #ccc;
	margin-top:20px;
}
#yh{
	width: 254px;
	height: 112px;
	background: #e6e6e6;
}
#btnn{
	width: 98px;
	height:35px;
	background:#cc0000;
	border: none;
	border-radius:8%;
	margin-left:70px;
	margin-top:50px;
	font-weight: bolder;
	color: #fff;
}
#gs{
	height: 370px;
}
#gs dl{
	width: 210px;
	height: 63px;
	border: 1px solid #ccc;
	text-align: center;
	margin-left:20px;
	margin-top:20px;
}
#gs dl dt{
	float: left;
}
#gs dl dd{
	padding-right: 20px;
	padding-top: 20px;
	float: right;
}
#gs dl dt img{
  width: 62px;
  height: 62px;
}
#gs h5{
	width: 213px;
	height: 26px;
	border-bottom: 1px solid #ccc;
	line-height: 26px;
	margin-left:8px;
	margin-top: 10px;
}
#s6{
	float: left;
}
#s7{
	float: right;
}
#btn1{
	margin-top: 30px;
	margin-left: 70px;
}
#h{
	width: 213px;
	height: 26px;
	border-bottom: 1px solid #ccc;
	line-height: 26px;
	margin-left:8px;
	margin-top: 10px;
}
#s8{
	float: left;
}
#zb{
	width: 198px;
	height: 247px;
}
#zb dl{
	width: 195px;
	height: 42px;
	margin-top:20px;
	margin-left: 20px;
	text-align: center;
}
#zb dl dt{
	float: left;
}
#zb dl dd{
	float: right;
}
#zb dl dt img{
	width: 40px;
	height: 40px;
}
    </style>
	<body>
       <script src="node_modules/axios/dist/axios.min.js"></script>
        <script src="node_modules/jquery/dist/jquery.min.js"></script>
        
		<div id="tl">
			<div id="nav">
				<img src="img/head1.png"/>
				<ul>
					<li>发现音乐</li>
					<li>我的音乐</li>
					<li>朋友</li>
					<li>商场</li>
					<li>音乐人</li>
					<li>下载客户端</li>
				</ul>
				<ul>
					<li><input type="text" placeholder="音乐/视频/电台/用户"/></li>
					<li><input type="button" id="" value="创作者中心" /></li>
					<li>登录</li>
				</ul>
			</div>
		</div>
		<div class="box2">
			<div class="box2_1">
				<ul>
					<li>推荐</li>
					<li>排行榜</li>
					<li>歌单</li>
					<li>主播电台</li>
					<li>歌手</li>
					<li>新碟上架</li>
				</ul>
			</div>
		</div>
		<div id="box3">
			<ul class="u1">
            
			</ul>
			<ol id="ol">
				<li class="ol_li"></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				
			</ol>
			  
			<div class="l"><</div>
			  <img src="img/body2-2.png" alt="" id="im">
			<div class="r">></div>
		</div>
		</div>
		
	<div id="box4">
		<div id="lef">
			<div id="rem">
        <ul id="u1">
			<li><h1>热门推荐</h1></li>
			<li>华语 |</li>
			<li>流行 |</li>
			<li>摇滚 |</li>
			<li>民谣 |</li>
			<li>电子</li>
			<li id="li">更多</li>
		</ul>
		
		</div>
		<h2 id="h2"><span id="s1">新碟上架</span><span id="s2">更多</span></h2>
		<div id="xd"></div>
		<div id="bd">
			<div class="clear"></div>
			<h2 id="h3"><span id="s3">榜单</span><span id="s4">更多</span></h2>
			<div id="bd1">

			</div>
		</div>
	</div>
		<div id="ri">
       <div id="yh">
     <button id="btnn">用户登录</button>
	   </div>
	   <div id="gs">
        <h5><span id="s6">入驻歌手</span> <span id="s7">查看全部</span></h5>
	   </div>
	   <div class="clear"></div>
	   <button id="btn1">申请成为网易音乐人</button>
	   <h5 id="h"><span id="s8">热门主播</span></h5>
	   <div id="zb">

	   </div>
		</div>
	</div>
		<script>
            let  data= new Date();
			
           //轮播接口
			axios({
                method:"GET",
                url:`http://localhost:3000/banner?+${data.getTime()}`
            })
            .then(a=>{
                let li=""
                a.data.banners.forEach(item => {
                    li+=`<li><img src="${item.imageUrl}">
					</li>`
                });
                $(".u1").html(li)
            })

        //实现轮播
		function lun(){
			$(".r").click(function(){
            //小圆圈 
            let _active  =  $(".ol_li")
            if(_active.next().length>0){
            $(".ol_li").removeClass("ol_li").next().addClass("ol_li")
            }else{
                $(".ol_li").removeClass("ol_li")
                $("#ol li:first").addClass("ol_li")
            }
          //  console.log($(".ol_li").removeClass("ol_li").next().addClass("ol_li"));
            //对应图片 
            let _ind =$(".ol_li").index()
           $(".u1 li").hide().eq(_ind).fadeIn(2500)  

        })
        $(".l").click(function(){
            //小圆圈 
            let _active  =  $(".ol_li")
            if(_active.prev().length>0){
            $(".ol_li").removeClass("ol_li").prev().addClass("ol_li")
            }else{
                $(".ol_li").removeClass("ol_li")
                $("#ol li:last").addClass("ol_li")
            }
          //  console.log($(".ol_li").removeClass("ol_li").next().addClass("ol_li"));
            //对应图片 
            let _ind =$(".ol_li").index()
           $(".u1 li").hide().eq(_ind).fadeIn(2500)  

        })



        //划过小圆圈
        $("#ol li").mouseover(function(){
            $(this).siblings().removeClass("ol_li").end().addClass("ol_li")
            let _ind =$(".ol_li").index()
           $(".u1 li").hide().stop().eq(_ind).fadeIn(2500)  
        })

        //自动播
        let timer;

        function  autoplay(){
            timer=setInterval(function(){
                $(".r").click()  
            },2500)
        }
        autoplay()

        //
        $("#box3").hover(function(){
            $(".l").show()
            $(".r").show()
            clearInterval(timer)
        },function(){
            $(".l").hide()
            $(".r").hide()
            autoplay()

        })
		}
		lun();
        //热门推荐接口
			axios({
			method:"GET",
			url:`http://localhost:3000/personalized?limit=8`
		
		}).then(b=>{
			let dl="";
			b.data.result.forEach(item=>{
				dl+=`
				<dl>
				<dt>
				<img src="${item.picUrl}">
				</dt>
				<dd>${item.name}</dd>
				</dl>`
			})
			$("#rem").append(dl)
		})

		//新碟上架接口
		axios({
			method:"GET",
			url:`http://localhost:3000/top/album`
		}).then(c=>{
			console.log(c)
			let dl=""
			c.data.weekData.forEach(item=>{
				
              dl+=`
			  <dl>
			<dt><img src="${item.blurPicUrl}"></dt>
			<dd>${item.name}</dd>
			</dl>`
			})
			$("#xd").html(dl)
		})

//入驻歌手接口
  axios({
	  method:"GET",
	  url:"http://localhost:3000/top/artists?limit=5"
  }).then(d=>{
	  let dl=""
	  d.data.artists.forEach(item=>{
		  dl+=`<dl> 
		  <dt>
		  <img src="${item.img1v1Url}">
		  </dt>
		  <dd>${item.name}</dd>
		  </dl>`
	  })
	  $("#gs").append(dl);
  })

  //热门主播接口
//   axios({
// 	  method:"GET",
// 	  url:`http://localhost:3000/dj/toplist/popular?limit=5`
//   }).then(f=>{
// 	  let dl=""
// 	f.data.data.list.forEach(item=>{
// 		// console.log(item)
//           dl+=`
// 		<dl>
// 		   <dt><img src="${item.avatarUrl}"></dt>
// 		   <dd>${item.nickName}</dd>
// 		   </dl>`
// 	})
// 	$("#zb").append(dl)
//   })
$.ajax({
	type:"GET",
	url:`http://localhost:3000/dj/toplist/popular?limit=5`,
	dataType:"json",
	success(a){
		
		let dl=""
	a.data.list.forEach(item=>{
		// console.log(item)
          dl+=`
		<dl>
		   <dt><img src="${item.avatarUrl}"></dt>
		   <dd>${item.nickName}</dd>
		   </dl>`
	})
	$("#zb").append(dl);
	}
})
// fetch(`http://localhost:3000/dj/toplist/popular?limit=5`,{
//   method:"GET"
// }).then(f=>{
// 	return f.json();
// }).then(g=>{
// 	let dl=""
// 	g.data.list.forEach(item=>{
// 		// console.log(item)
//           dl+=`
// 		<dl>
// 		   <dt><img src="${item.avatarUrl}"></dt>
// 		   <dd>${item.nickName}</dd>
// 		   </dl>`
// 	})
// 	$("#zb").append(dl)
// })
		</script>
	</body>
</html>